<script>
export default {
  name: 'Navigation'
}
</script>

<template>
  <el-card class="layui-anim layui-anim-scale">
    <el-row type="flex" justify="start">
      <el-col>
        <router-link to="/approval">
          <img src="@/assets/common/approval.png">
          <span>假期审批</span>
        </router-link>
      </el-col>
      <el-col>
        <router-link to="/social">
          <img src="@/assets/common/social.png" alt="">
          <span>社保管理</span>
        </router-link>
      </el-col>
      <el-col>
        <router-link to="/department">
          <img src="@/assets/common/bpm.png">
          <span>组织架构</span>
        </router-link>
      </el-col>
      <el-col>
        <router-link to="/role">
          <img src="@/assets/common/role.png" alt="">
          <span>添加角色</span>
        </router-link>
      </el-col>
      <el-col>
        <router-link to="/employee">
          <img src="@/assets/common/employee.png" alt="">
          <span>添加员工</span>
        </router-link>
      </el-col>
      <el-col>
        <router-link to="/permission">
          <img src="@/assets/common/permission.png" alt="">
          <span>添加权限</span>
        </router-link>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  margin-top: 10px;

  .el-row {
    .el-col {
      a {
        display: flex;
        flex-direction: column;
        transition: all .5s linear;
        &:hover {
          transform: translateY(-5px);
        }

        img {
          width: 60px;
        }

        span {
          font-size: 15px;
          margin-top: 10px;
          color: #697086;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
